<template>
<!--  主要页面-->
  <div class="login">
    <div class="login-body">
      <div class="img">
        <el-image src="https://www.yubin-fuwu.top/Static/admin.png"></el-image>
      </div>
      <div class="login1">
        <div class="card">
          <div class="card1 flex-center" style="height: 8%;">
            <div class="card1-span">MANAGE SIGN IN</div>
            <div class="card1-img flex-center"><span class="flex-center">?</span></div>
          </div>
          <div class="card1 flex-align-center" style="height: 12%;">
            <span class="span1" v-if="data.emailShow">登录</span>
            <span class="span1" v-else>邮箱登录</span>
          </div>
          <div class="card1 flex-align-center" style="height: 12%;">
            <div class="cardEmail flex-center" @click="data.emailShow=!data.emailShow">
              <img v-if="data.emailShow" src="../assets/QQ.png"/>
              <img v-else src="../assets/user.png" style="height: 25px;width: 25px" />
              <span v-if="data.emailShow">使用QQ邮箱登录</span>
              <span v-else>使用账号登录</span>
            </div>
          </div>
          <div class="card1 flex-align-end " >
            <div class="text" v-if="data.emailShow">账号</div>
            <div class="text" v-else>邮箱账号</div>
            <div class="">
              <el-input
                  v-if="data.emailShow"
                  v-model="data.telephon"
                  maxlength="11"
                  placeholder="Please input account"
                  show-word-limit
                  class="cellphone"
              />

              <el-input v-else v-model="data.qqmailbox"  class="cellphone" placeholder="Please input email">
                <template #append>@qq.com&nbsp;</template>
              </el-input>

            </div>
          </div>
          <div class="card1 flex-align-end ">
            <div class="text" v-if="data.emailShow">密码</div>
            <div class="text" v-else>验证码</div>
            <div class="">
              <el-input
                  v-if="data.emailShow"
                  v-model="data.password"
                  maxlength="26"
                  placeholder="Please input password"
                  show-word-limit
                  type="password"
                  show-password
                  class="cellphone"
              />

              <el-input v-else v-model="data.code" maxlength="5"  class="cellphone" placeholder="Please input code">
                <template #append>
                  <div class="send-email" @click="sendEmailFun()">{{data.codeValue}}</div>
                </template>
              </el-input>


            </div>
          </div>
          <div class="card1 flex-align-center" style="height: 17%;">
            <el-button class="btn flex-center" v-if="data.emailShow" @click="SfinFun()">Sgin in</el-button>
            <el-button class="btn flex-center" v-else @click="loginEmailFun()">Sgin in</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  自定义加载组件-->
  <loading-shows v-if="data.loadingShow"></loading-shows>
</template>

<script lang="ts"  setup>
import {onMounted, ref} from 'vue';
import router from '../router';
import {login, loginEmail, sendEmail, selsPrivileges} from "../request/request";
import {DecryptConfig} from "../config/Encryption";
import LoadingShows from "../components/loadingShows.vue";
import {usePermissions} from "../store/authority";
import { ElNotification } from 'element-plus'
import {Decrypt, Encrypt} from "../config/secret";
/**
 * @param{{数据源}}
 */
const data=ref({
  telephon:'',//账号
  password:'',//密码
  emailShow:true,//是否账号登录
  qqmailbox:'',//邮箱账号
  code:'',//验证码
  timeClock:false,//倒计时关闭
  codeValue:'发送验证码',
  num:60,//倒计时
  loadingShow:false,//加载
})
onMounted(()=>{

})

/**
 * @param{{登录}}
 */
const SfinFun=()=>{
  data.value.loadingShow=true;//开启加载
  login({
    telephon:data.value.telephon,
    password:data.value.password,//密码
  }).then((res)=>{
    if (res.code==200){
      localStorage.setItem('token',res.data[1]);//存储token
      localStorage.setItem('openid',res.data[0]);
      const resDecryptConfig=(Decrypt(res.data[2]).split(","));
      usePermissions().updataUser();//更新用户信息
      usePermissions().updataPermissions(resDecryptConfig);
      if (resDecryptConfig.includes('Admin')){


        router.push({path:'/home'})
        data.value.loadingShow=false;//关闭加载
        ElNotification({title: 'Success', message: '登录成功', type: 'success'})



      }else if (resDecryptConfig.includes('SuperAdmin')){
        router.push({path:'/home'})
        data.value.loadingShow=false;//关闭加载
        ElNotification({title: 'Success', message: '登录成功', type: 'success'})



      }else {
        ElNotification({title: 'Error', message: '您暂无权限！', type: 'error'});
        deleteLocalStorage();//清除缓存
      }
    }else {deleteLocalStorage();}
  })

  setTimeout(()=>{
    data.value.loadingShow=false;//关闭
  },20000)
}

/**
 * @param{{发送验证码}}
 */
const sendEmailFun=()=>{
  if (data.value.timeClock!=false){
    return;
  }else {
    data.value.timeClock = setInterval(function() {
      if (data.value.num == 57) {
        sendEmail({qqmailbox:data.value.qqmailbox+'@qq.com'}).then((res)=>{
          if (res==''|| res==null){
            ElNotification({title: 'Success', message: '发送成功', type: 'success'})
          }else {
            ElNotification({title: 'Error', message: '邮箱异常！', type: 'error'})
          }
        })
      }
      data.value.codeValue=data.value.num-- +'s '+'后重发'
      if (data.value.num == 0) {
        data.value.num = 60
        data.value.codeValue = '重发验证码'
        clearInterval(data.value.timeClock)
        data.value.timeClock=false
      }
    }, 1000)
  }
}

/**
 * @param{{验证码登录}}
 */
const loginEmailFun=()=>{
  data.value.loadingShow=true;
  loginEmail({
    openid: data.value.qqmailbox+'@qq.com',
    code: data.value.code
  }).then((res)=>{
    if (res.code==200){
      localStorage.setItem('token',res.data[1]);
      localStorage.setItem('openid',res.data[0]);
      const resDecryptConfig=(Decrypt(res.data[2]).split(","));
      usePermissions().updataUser();//更新用户信息
      usePermissions().updataPermissions(resDecryptConfig);
      if (resDecryptConfig.includes('Admin')){
        router.push({path:'/home'})
        data.value.loadingShow=false;//关闭加载
        ElNotification({title: 'Success', message: '登录成功', type: 'success'})
      }else if (resDecryptConfig.includes('SuperAdmin')){
        router.push({path:'/home'})
        data.value.loadingShow=false;//关闭加载
        ElNotification({title: 'Success', message: '登录成功', type: 'success'})
      }else {
        ElNotification({title: 'Error', message: '您暂无权限！', type: 'error'})
        deleteLocalStorage()
      }
    }else {deleteLocalStorage()}
  })
  setTimeout(()=>{
    data.value.loadingShow=false;//关闭
  },20000)
}

/**
 * @param{{清除缓存}}
 */
const deleteLocalStorage=()=>{
  data.value.loadingShow=false;
  localStorage.removeItem('token')
  localStorage.removeItem('openid')
  localStorage.removeItem('my_user')
}
</script>

<style lang="less" scoped>
 .logining{
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(33, 33, 33, 0.79);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .spinner {
   background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));
   width: 100px;
   height: 100px;
   animation: spinning82341 1.7s linear infinite;
   text-align: center;
   border-radius: 50px;
   filter: blur(1px);
   box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
 }

 .spinner1 {
   background-color: rgb(36, 36, 36);
   width: 100px;
   height: 100px;
   border-radius: 50px;
   filter: blur(10px);
 }

 @keyframes spinning82341 {
   to {
     transform: rotate(360deg);
   }
 }
page {
  padding: 0;
  margin: 0;
  min-height: 500px;
  min-width:600px;
  user-select: none;
}
.send-email{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
.send-email:active{
  transform: scale(1.03);
}
.login {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-body {
  width: 90%;
  height: 90%;
  background-color: #f8f8ff;
  border-radius: 1rem;
  display: flex;
  user-select: none;
}
.login-body .el-image {
  width: 90%;
  height: auto;
  margin-top: -5%;
}
.img {
  width: 55%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card {
  width: 80%;
  height: 90%;
  border-radius: 40px;
  background: linear-gradient(145deg, #f1f1f1, #ffffff);
  box-shadow: 10px 10px 30px #ccccd2,
    -10px -10px 10px #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login1 {
  width: 45%;
  min-width: 450px;
  min-height: 600px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card1 {
  width: 80%;

  height: 14%;
}
.flex{
  display: flex;
}
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-column{
  flex-direction: column;
}
.card1-span{
  width: 90%;
  font-family:'隶书';
  font-weight: 900;
  font-size: 1.3rem;
}
.card1-img{
  width: 10%;
  height:100%;
}
.card1-img span{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #667eea;
  color: white;
  font-size: 0.3rem;
  cursor: pointer;
}
.flex-align-center{
  display: flex;
  align-items: center;
}
.flex-align-end{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.span1{
  font-size: 1.8rem;
  font-weight: 600;
}
.cardEmail{
  width: 60%;
  height: 40px;
  background-color: #3274d7;
  border-radius: 5px;
  cursor: pointer;
}
.cardEmail img{
  width: 30px;
  height: 30px;
}
.cardEmail span{
  font-size: 0.9rem;
  color: white;
  margin-left: 10px;
}
.cardEmail:hover{
  background-color: #245dd7;
}
.cardEmail:active{
  transform: scale(1.01);
}
.cellphone{
  width: 100%;
  height: 40px;
}
.text{
  font-size: 0.8rem;
  color: gray;
  margin-bottom: 5px;
  margin-left: 2px;
}
.btn{
  width: 100%;
  height: 45px;
  background-color: green;
  color: white;

}
.btn:hover{
  background-color: #038d2a;
  color: white;

}
</style>
